<template>
    <div>
        <h1>用户信息列表</h1>

        <table class="table table-bordered table-striped">
            <tbody>
                <tr>
                    <td>序号</td>
                    <td>姓名</td>
                    <td>手机号</td>
                    <td>账号</td>
                    <td>密码</td>
                    <td>所属角色</td>
                    <td>创建人</td>
                </tr>

                <tr v-for="item in list" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.phone.substring(0,3)}}****{{item.phone.substring(7)}}</td>
                    <td>{{item.userName}}</td>
                    <td>***</td>
                    <td>{{item.roleName}}</td>
                    <td>{{item.createName}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted} from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios';
import { on } from 'events';
const router = useRouter()
const route = useRoute()

let list:any = ref([]);

onMounted(() => {
    getlist();
})

const getlist = () => {
    axios({
        url: '/api/User/GetUsers',
        method: 'get',
    })
    .then((res) => {
        console.log(res);
        list.value = res.data;
    })
    .catch((err) => {
        console.log(err);
    })
}


</script>

<style scoped>
h1{
    text-align: center;
    color:aquamarine;
}
</style>